<script setup lang="ts">
// VUE2:  this.$refs.h1Ref  ----> 获取 DOM
import { ref } from 'vue';

// VUE3：
// 1. h1Ref = ref(null) 声明了 DOM 变量
// 2. <h1 ref="h1Ref"> 绑定到实际元素中
// 3. 点击时候修改内容的值
// 4. 手动告诉 提示, 我是什么类型 ref<null | HTMLHeadingElement>
// document.createElement("h1")
const h1Ref = ref<null | HTMLHeadingElement>(null)

const getH1 = () => {
    if (h1Ref.value) {
        h1Ref.value.innerHTML = '哈哈'
    }
}

</script>

<template>
    <h1 ref="h1Ref">Hello vue3</h1>
    <button @click="getH1">点我获取H1元素</button>
</template>

<style scoped>
</style>